<template>
	<view>
		<div style="height: 50rpx;background:#fff"></div>
		<Title :title="title" style="background-color: #fff;" />
		<u--form
			:model="model1"
			:rules="rules"
			ref="uForm"
			class="ml-20 mr-20 formSty"
		>
		<view class="topBg">
			<u-form-item
				:label="$t('订单编号')"
				prop="user_id"
				labelWidth="150"
				class="inputSty pl-15 mt-16 h-95"
			>
				<u--input
					v-model="orderNo"
					disabled
					disabledColor="#fff"
					border="none"
					class="mr-20 text-333 font-bold"
				></u--input>
			</u-form-item>
		</view>
			<view class="contentBg">
				<u-form-item
					:label="$t('货物名称')"
					prop="product_name"
					labelWidth="150"
					class="inputSty"
				>
					<u--input
						v-model="model1.product_name"
						:placeholder="$t('请输入货物')"
						border="none"
						disabledColor="#fff"
						:disabled="true"
						class="mr-20 text-333"
					></u--input>
				</u-form-item>
				<u-form-item
					prop="after_sales_type"
					border
				>
					<u-button class="badBtn" @click="show = true">
						<span v-if="badInfo" class="text-333">{{ badInfo }}</span>
						<span v-else style="color: #8C8C8C">{{ badPlace }}</span>
						<image class="w-20 h-15" src="/static/icon/downArrow.png"></image>
					</u-button>
					<div></div>
					<u-picker :show="show" :columns="columns" @cancel= "show = false" keyName="title" @confirm="getSaleInfo"></u-picker>
				</u-form-item>
					<p class="titleSty">{{$t('情况说明')}}</p>
				<u-form-item
					prop="situation"
				>
					<u--textarea v-model="model1.situation" class="textareaSty" :placeholder="$t('请填写情况说明')"></u--textarea>
				</u-form-item>
				<u-form-item
					prop="images"
				>
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						:multiple="true"
						:maxCount="10"
						width="150"
						height="150"
						class="mt-20"
					  ></u-upload>
				</u-form-item>
					<p class="titleSty">{{$t('承接单位')}}</p>
				<u-form-item
					prop="undertake_user_id"
				>
				<u--textarea
					v-model="undertakeName"
					:placeholder="$t('请输入内容')"
					autoHeight
					border="none"
					disabled
					disabledColor="#F7F7F7"
					class="businessSty"
					></u--textarea>
					<!-- <u--input
					    border="none"
						disabled
						disabledColor="#F7F7F7"
					    v-model="undertakeName"
						class="businessSty"
					  ></u--input> -->
				</u-form-item>
				<p class="titleSty">{{$t('售后诉求')}}</p>
				<u-form-item
					prop="ask"
				>
					<u--textarea v-model="model1.ask" class="textareaSty" :placeholder="$t('请填写售后诉求')"></u--textarea>
				</u-form-item>
			
			</view>
		</u--form>
		<u-modal class="modalSty" :show="showTel" :content="content" :showCancelButton="true" @cancel="cancelTel" @confirm="confirmTel"></u-modal>
		<view class="empty"></view>
		<view class="footer_btn4">
			<view class="btn_item" @click="callUser">
				<image class="ico" src="/static/img/ico_b1.png" mode="aspectFill"></image>
				<view class="name">
					{{$t('联系商家')}}
				</view>
			</view>
			<!-- <view class="btn_item">
				<image class="ico" src="/static/img/ico_b2.png" mode="aspectFill"></image>
				<view class="name">
					{{$t('平台介入')}}
				</view>
			</view> -->
			<u-button class="btn_blue" @click="submit" :disabled="btnDis">
				{{$t('提交')}}
			</u-button>
		</view>
	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { submitAfterSales, afterSalesTypeSelect, undertakeUser } from '@/api/order.js'
	import { request_minute } from '@/api/basic'
	
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('售后反馈'),
				showTel: false,
				btnDis: false,
				undertakeName: '',
				content: '',
				badPlace: this.$t('请选择售后类型'),
				badInfo: '',
				orderNo: '',
				allInfo: {},
				show: false,
				fileList1: [],
				fileList: [],
				fileListUp: [],
				columns: [],
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					situation: '', // 情况说明
					ask: '', // 售后请求
					after_sales_type: '', // 售后类型
					undertake_user_id: '' ,// 承接的用户id
					product_name: '',
					delivery_id: ''
				},
				rules: {
					'user_id': {
						type: 'string',
						required: true,
						message: this.$t('请填写订单编号'),
						trigger: ['change']
					},
					'situation': {
						type: 'string',
						min: 1,
						required: true,
						message: this.$t('请填写情况说明'),
						trigger: ['change']
					},
					'ask': {
						type: 'string',
						min: 1,
						required: true,
						message: this.$t('请输入售后请求'),
						trigger: ['change']
					},
					'after_sales_type': {
						type: 'number',
						min: 1,
						required: true,
						message: this.$t('请选择售后类型'),
						trigger: ['change']
					},
					'product_name': {
						type: 'string',
						min: 1,
						required: true,
						message: this.$t('请填写货物名称'),
						trigger: ['change']
					}
				},
				showSex: false
			}
		},
		onLoad(options) {
			this.allInfo = JSON.parse(options.item)
			console.log('uni.getStorageSync("user_id")--', uni.getStorageSync("user_id"))
			console.log('88999=====', this.allInfo)
			this.model1.undertake_user_id = this.allInfo.user_id
			this.model1.delivery_id = this.allInfo.id
			this.orderNo = this.allInfo.order_no
			this.model1.product_name = this.allInfo.goods_info.title
		  },
		  mounted() {
			  this.getAfterSalesTypeSelect()
			  this.undertakeUserFun()
		  },
		methods: {
			undertakeUserFun() {
				undertakeUser({
					delivery_id: this.allInfo.id,
					user_id: uni.getStorageSync("user_id")
				}).then(res => {
					console.log('res====', res)
					if (res.data.code == 200) {
						this.model1.undertake_user_id = res.data.data.data[0].id
						this.undertakeName = res.data.data.data[0].username
					}
					
				})
			},
			getAfterSalesTypeSelect() {
				afterSalesTypeSelect().then(res => {
					if(res.data.code == 200) {
						this.columns =[ res.data.data.data] || []
					}
				})
			},
			cancelTel() {
				this.showTel = false
			},
			confirmTel() {
				uni.makePhoneCall({
					phoneNumber: this.allInfo.tel || ''
				})
				this.showTel = false
			},
			callUser() {
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: this.allInfo.cooperate.id,
				}).then(res => {
					// this.showInfo = true
					// this.contentInfo = res
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: this.allInfo.cooperate.id,
								type: res.data.data.type || 1,
							}
						})
					} else {
						uni.showToast({
							title: this.$t('积分不足，请充值积分'),
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
								webview: 'zWebView'
							})
						}, 500)
					}
					console.log('res0000', res)
				})
				// this.isMessageGo({
				// 	action: 'call',
				// 	data: {
				// 		userId: this.allInfo.user_id,
				// 		type: 1,
				// 	}
				// })
				// console.log('90909090')
				// this.content = this.$t('是否拨打电话给') + this.allInfo.tel
				// this.showTel = true
			},
			getSaleInfo(e) {
				this.show = false
				this.badInfo = e.value[0].title
				this.model1.after_sales_type = e.value[0].id
			},
				submit() {
					this.model1.delivery_id = this.allInfo.id || ''
					console.log('000--000', this.model1)
					this.$refs.uForm.validate().then(res => {
						this.btnDis = true
						uni.showLoading({
							title: this.$t('提交中'),
							mask: true
						});
						this.fileList1.map(item => {
							this.fileListUp.push(item.url)
						})
						submitAfterSales({...this.model1, images:this.fileListUp.join(',') }).then(res => {
							if(res.data.code == 200) {
								uni.$u.toast('提交成功')
								setTimeout(() => {
									uni.redirectTo({
										url:'/pages/shipmentRecord/index?index=5'
									})
								}, 500)
								uni.hideLoading()
								// this.btnDis = false
							}
						})
					}).catch(errors => {
						uni.$u.toast('请检查是否有未填写字段')
						uni.hideLoading()
					})
				},
				back() {
					// uni.navigateBack()
					this.cback()
				},
				sexSelect(e) {
					this.model1.order.name = e.name
					this.$refs.uForm.validateField('order.name')
				},
				 async afterRead(event) {
		            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					console.log('000===1111222', event)
		            let lists = [].concat(event.file)
		            let fileListLen = this[`fileList${event.name}`].length
		            lists.map((item) => {
		                this[`fileList${event.name}`].push({
		                    ...item,
		                    status: 'uploading',
		                    message: '上传中'
		                })
		            })
					console.log('90--=====', lists)
		            for (let i = 0; i < lists.length; i++) {
		                const result = await this.uploadFilePromise(lists[i].url)
		                let item = this[`fileList${event.name}`][fileListLen]
		                this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
		                    status: 'success',
		                    message: '',
		                    url: result
		                }))
		                fileListLen++
		            }
		        },
		        uploadFilePromise(url) {
		            return new Promise((resolve, reject) => {
		                let a = uni.uploadFile({
		                    url: 'https://app.gluz.com.cn/api/common/upload',
		                    filePath: url,
		                    name: 'file',
		                    formData: {
		                        user: 'test'
		                    },
							header: {
								'xzdToken': uni.getStorageSync('cad2ca15-2f0c-40b4-b1ae-d4035de2fed6&status'),
								'version': uni.getStorageSync('1.0.0'),
								'lang': uni.getStorageSync('zh'),
								'Authorization': 'Bearer ' + uni.getStorageSync('cad2ca15-2f0c-40b4-b1ae-d4035de2fed6&status') // 在这里添加token
							},
		                    success: (res) => {
		                        const data = JSON.parse(res.data)
								// this.fileListUp.push(data.data.fullurl)
								console.log('--===', data)
		                        resolve(data.data.url)
		                    }
		                });
		            })
		        },
				 deletePic(event) {
					this[`fileList${event.name}`].splice(event.index, 1);
				  },
				 //  // 新增图片
				 //  async afterRead(event) {
					// // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					// let lists = [].concat(event.file);
					// let fileListLen = this[`fileList${event.name}`].length;
					// lists.map((item) => {
					//   this[`fileList${event.name}`].push({
					// 	...item,
					// 	status: "uploading",
					// 	message: this.$t('上传中'),
					//   });
					// });
					// for (let i = 0; i < lists.length; i++) {
					//   const result = await this.uploadFilePromise(lists[i].url);
					//   let item = this[`fileList${event.name}`][fileListLen];
					//   this[`fileList${event.name}`].splice(
					// 	fileListLen,
					// 	1,
					// 	Object.assign(item, {
					// 	  status: "success",
					// 	  message: "",
					// 	  url: result,
					// 	})
					//   );
					//   fileListLen++;
					// }
				 //  },
				 //  uploadFilePromise(url) {
					// return new Promise((resolve, reject) => {
					//   let a = uni.uploadFile({
					// 	url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
					// 	filePath: url,
					// 	name: "file",
					// 	formData: {
					// 	  user: "test",
					// 	},
					// 	success: (res) => {
					// 	  setTimeout(() => {
					// 		resolve(res.data.data);
					// 	  }, 1000);
					// 	},
					//   });
					// });
				 //  },
		}
	}
</script>

<style lang="less">
	page {
			background: #F6F7FB;
		}
		
		.empty {
			width: 100%;
			height: 200rpx;
		}
		.titleSty {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			margin-top: 40rpx;
		}
		.inputSty {
			border-radius: 18rpx;
			background-color: #fff;
			line-height: 95rpx;
			e-input {
				float: right;
			}
			/deep/ .uni-input-input {
				text-align: right;
				margin-right: 50rpx;
			}
		}
		/deep/ .u-form-item__body__left__content__label {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
		}
			uni-button:after {
				border: none;
			}
			.formSty {
				padding-bottom: 200rpx;
				/deep/ .u-form-item__body {
					padding: 0;
				}
			}
			.contentBg {
				background-color: #fff;
				padding: 0 24rpx;
				margin-top: 24rpx;
				border-radius: 18px;
				padding-bottom: 35rpx;
				/deep/ .u-form-item__body__right__message {
					margin-left: 0 !important;
				}
				/deep/ .u-icon__icon {
					font-size: 60rpx !important;
				}
			}
			.topBg {
				background-color: #fff;
				padding: 0 16rpx;
				margin-top: 24rpx;
				border-radius: 18px;
			}
			.textareaSty {
				height: 226rpx;
				border-radius: 18rpx;
				border: 2rpx solid #D8D8D8;
				// background: #F7F7F7;
				margin-top: 24rpx;
			}
			.businessSty {
				min-height: 80rpx;
				border-radius: 18rpx;
				border: 2rpx solid #F7F7F7;
				// background:none !important ;
				color: #333;
				font-family: "PingFang SC";
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				margin-top: 24rpx;
				// text-indent: 24rpx;
			}
			
			.badBtn {
				height: 80rpx;
				border-radius: 18rpx;
				// background: #F7F7F7;
				border: 2rpx solid #D8D8D8;
				display: flex;
				justify-content: space-between;
			}
		.header {
			font-size: 34rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
			text-align: center;
			position: relative;
			padding-top: var(--status-bar-height);
		}
		.back {
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			top: 15rpx;
		}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 75%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.info_jiesuan{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding:20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
		.jian{
			color: #FE3E3B;
		}
	}
	.disp_title{
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding:24rpx 35rpx 10rpx;
	}
	.bor_bgff{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.disp_info{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		.ph{
			display: block;
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
	.guanl_order{
		margin: 20rpx 24rpx;
		height: 96rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.name{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 600;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
	
		}
	}
	.modalSty {
		text-align: center;
	}
</style>
